import React, { useState, useEffect } from 'react';
import { Button, Modal } from 'antd';
import Find from '../m3/Find';
// import 'antd/dist/antd.css';
import './Buttom3.scss';

const Buttom3 = () => {
    const [flag, setFlag] = useState(0);
    const [visible, setVisible] = useState(false);
    const [previewUrl, setPreviewUrl] = useState(null);
    const [uploadResult, setUploadResult] = useState(null);

    const texts = [
        "1、在播种之前，先将种子放在55度温水里浸泡十五分钟，这样能起到防治病菌的作用。",
        "2、对种子进行药剂拌种，选择能防真菌与卵菌病害的药剂，比如说恶霉灵、多菌灵、甲霜灵、代森锰锌。",
        "3.为预防青枯病，可以推广高畦种植，生长期间多施加腐熟有机肥。发病初期浇灌噻菌铜悬浮剂等，在发病前也可以使用枯草芽孢杆菌可湿性粉剂进行灌根。",
        "4.西红柿应开沟起垄栽培，合理密植，及时发现病株，及时喷洒醚菌酯悬浮剂，氢氧化铜可湿性粉剂等进行药剂防治晚疫病。",
    ];

    useEffect(() => {
        const interval = setInterval(() => {
            setFlag((prevFlag) => (prevFlag + 1) % texts.length);
        }, 7000);
        return () => clearInterval(interval);
    }, [texts.length]);

    const showModal = () => {
        setVisible(true);
    };

    const handleOk = () => {
        setVisible(false);
        setPreviewUrl(null);
        setUploadResult(null);
    };

    const updatePreviewUrl = (newPreviewUrl) => {
        setPreviewUrl(newPreviewUrl);
    };

    const updateUploadResult = (newUploadResult) => {
        setUploadResult(newUploadResult);
    };

    return (
        <div>
            <div className="tieshi">{texts[flag]}</div>
            <div className="button">
                <a href="https://atlfsj.github.io/cesium-screen/#/" target="self_black">
                    <button>cesium大屏监测系统</button>
                </a>
                <a href="https://atlfsj.github.io/tomato-knowledgeGraph/#/" target="self_black">
                    <button>点击进入知识图谱番茄病虫害识别与诊断专家系统</button>
                </a>
                <Button type="primary" onClick={showModal}>点击识别番茄病虫害</Button>
                <Modal
                    visible={visible}
                    width="900px"
                    title="病虫害识别系统"
                    onOk={handleOk}
                    onCancel={handleOk}
                >
                    <iframe className="identify">
                        <Find
                            previewUrl={previewUrl}
                            uploadResult={uploadResult}
                            updatePreviewUrl={updatePreviewUrl}
                            updateUploadResult={updateUploadResult}
                        />
                    </iframe>
                </Modal>
            </div>
        </div>
    );
};

export default Buttom3;
